<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>热门图片</title>
  <link rel="icon" href="images/拉黑小怪兽.png">
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/css/justifiedGallery.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/js/jquery.justifiedGallery.min.js"></script>

  <script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
  <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
  <link href="css/style.css" rel='stylesheet' />
  <link href="css/font-awesome.css" rel="stylesheet">
  <link href="css/button.css" rel='stylesheet' type='text/css' />
  <link href="css/daohang.css" rel='stylesheet' type='text/css' />
  <link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800" rel="stylesheet">
  <link href="http://fonts.googleapis.com/css?family=Mallanna" rel="stylesheet">
  <style>
    .sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 9999998;
      min-width: 1000px;
    }

    /* 添加一个CSS类来实现水平翻转 */
    .flip-horizontal {
      transform: scaleY(-1);
      filter: FlipH;
      /* 兼容IE */
      transition: transform 0.5s ease;
    }

    .yes {
      display: block;
    }

    .cd-search {
      z-index: 99999999;
      width: 60%;
      top: 100%;
      left: 38%;
      border-radius: 25px;
    }

    .cd-search input {
      border-radius: 25px;
    }

    .hid .variety {
      position: absolute;
      z-index: 9999999;
      left: 280px;
      top: 65px;
      font-size: 20px;
      min-width: 50px;
      min-height: 32px;
      text-align: left;
      white-space: normal;
      background-color: #fff;
      border: gray solid;
      border-radius: 5px;
      border-width: 1px;
    }

    .hid-arrow:after {
      content: " ";
      top: 55px;
      left: 300px;
      margin-left: -10px;
      border-bottom-color: gray !important;
      border-top-width: 0 !important;
      border-width: 10px;
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    .daohang2-font {
      color: black;
    }

    #daohang-faxian {
      cursor: pointer;
    }

    .photograph {
      box-sizing: border-box;
      background-color: #f7f8fa;
      margin: 0;
      border: 0;
      padding: 20px 40px 20px 40px;
      display: block;
    }

    .photo-prin {
      min-height: 300px;
      display: flex;
      flex-wrap: wrap;
    }

    .photo-box {
      height: 320px;
      position: relative;
      left: 10px;
      right: 10px;
      padding: 10px;
    }

    /*图片高度为300px*/

    .photo-box img {
      height: 300px;
    }

    .top-bar_sub_w3layouts_agile {
      border-top: 0.01cm solid #000;
    }
  </style>

</head>

<body>

  <div class="top-bar_sub_w3layouts_agile" style="height: 80px;border-bottom: 1px;border: #000;min-width: 1000px">
    <ul class="_ul_ daohangpos">
      <li class=" _need_popover" style=" position: absolute; left: 200px; top: 25px;">
        <a class="daohang_font" id="daohang-faxian" href="shouye.html">首页 </a>
        <a href="remen.html" class="daohang_font">热门</a>
        <a href="xinzuo.html" class="daohang_font">新作</a>
        <a href="guanzhu.html" class="daohang_font">关注</a>
        <a href="cangku.html" class="daohang_font">仓库</a>
      </li>
    </ul>
    <script>
      var hid = document.getElementById("hid");
      var fx = document.getElementById("daohang-faxian");
      var im = document.getElementById("daohang-img");
      var flag = 0;
      fx.onclick = function () {
        if (flag == 0) {
          im.src = "images/scroll-top.png";
          hid.style.display = "block";
          flag = 1;
        } else {
          im.src = "images/down.png";
          hid.style.display = "none";
          flag = 0;
        }
      }
    </script>
    <!-- 		<div id="caidan" class="fangkuang">
			<a href="buluo.html" class="daohang_font" style="position: absolute;left:12px;">部落</a>
			<a href="buluo.html" class="daohang_font" style="position: absolute;left:12px;top:40px;">活动</a>
		</div> -->
    <!-- 		<script src="js/daohang.js"></script> -->
    <div class="search">
      <div class="right" style="right: 90px;">
        <h1><a style="position: absolute;left: 30px;top:20px;color:black;" href="shouye.html">Photo
            Go</a></h1>
        <h5>
          <a style="width: 150px; position: absolute;right:380px;top:25px;padding: 2px 20px;text-align: center;"
            class="sign signup " href="userinfo.html">修改个人信息</a>
          <a style="position: absolute;right:250px;top:25px;padding: 2px 20px;text-align: center;" class="sign signup "
            href="shangchuan.html">上传</a>
          <a id="tuichu"
            style="width: 150px; position: absolute;right:80px;top:25px;padding: 2px 20px;text-align: center;"
            class="sign signup ">退出登录</a>
        </h5>
      </div>

      <div class="cd-main-header">
        <ul class="cd-header-buttons">
          <li><a class="cd-search-trigger" href="#cd-search" style="position: absolute;right: 10px;top: 35px;">
              <span></span></a></li>
        </ul>
        <!-- cd-header-buttons -->
      </div>
      <div id="cd-search" class="cd-search searchstyle">
        <form action="#" method="post">
          <input id="sousuo" name="Search" type="search" placeholder="搜索作品">
        </form>
      </div>
    </div>
    <div class="clearfix"> </div>
  </div>
  <div class="photograph">
    <div id="my-gallery" class="justified-gallery"></div>
  </div>

  <script>
    var tuichu = document.getElementById('tuichu');
    const token = localStorage.getItem("token");
    function handleKeyDown(event) {
      if (event.keyCode === 13) {
        var sousuo = document.getElementById('sousuo');
        var d1 = {
          "description": "",
        }
        d1["description"] = sousuo.value;
        console.log("type", typeof (sousuo.value), "text:", sousuo.value);
        $.ajax({
          method: 'get',
          url: 'http://localhost:7777/content/Category/list' + "?description=" + sousuo.value,
          contentType: 'application/json;charset=UTF-8',
          success: function (data, status, xhr) {
            var responseText = xhr.responseText;
            console.log(responseText);
            if (responseText.includes("200")) {
              var result = JSON.parse(responseText);
              var data = result["data"];
              console.log("data:", data);
              var len = data.length;
              var where = "sousuo.html" + "?";
              for (var i = 0; i < len; i++)
                where = where + "id=" + data[i]["id"];
              console.log(where);
              window.location.href = where;
            }
          },
          error: function (xhr, status, error) {
            var responseText = xhr.responseText;
            console.log("error:", responseText);
          }
        })
        event.preventDefault(); // 阻止默认的回车提交行为（如果有）
      }
    }
    tuichu.addEventListener("mousedown", function (event) {
      $.ajax({
        method: 'get',
        url: 'http://localhost:7777/logout',
        contentType: 'application/json;charset=UTF-8',
        headers: {
          "token": token
        },
        success: function (data, status, xhr) {
          var responseText = xhr.responseText;
          console.log(responseText);
          if (responseText.includes("200")) {
            tuichu.href = "shouyeno.html";
            tuichu.click();
          }
        },
        error: function (xhr, status, error) {
          var responseText = xhr.responseText;
          console.log("error:", responseText);
        }
      })
    })
    var re = [];
    $.ajax({
      async: false,
      method: 'get',
      url: 'http://localhost:7777/article/hotArticleList',
      //url: 'http://www.baidu.com',
      contentType: 'application/json;charset=UTF-8',
      success: function (result) {
        re = result['data'];
      },
    })
    var len = re.length;
    $(document).ready(function () {
      // 假设后端提供的图片URL列表是一个JSON数组
      /*var imageUrls = [
      "https://alifei02.cfp.cn/creative/vcg/800/new/VCG211459373948.jpg",
        "https://pic.quanjing.com/pm/zr/QJ6921303411.jpg@!794ws",
        "https://pic.quanjing.com/pm/zr/QJ6921303411.jpg@!794ws",
        "https://pic.quanjing.com/pm/zr/QJ6921303411.jpg@!794ws",
        "https://pic.quanjing.com/pm/zr/QJ6921303411.jpg@!794ws",
        "https://pic.quanjing.com/pm/zr/QJ6921303411.jpg@!794ws"
      ];*/
      var imageUrls = [];
      for (var i = 0; i < len; i++) {
        imageUrls[i] = re[i]["photo"];
      }
      // 将图片URL动态添加到Justified-Gallery中
      var gallery = $("#my-gallery");
      var j = 0;
      $.each(imageUrls, function (index, imageUrl) {
        var imd = re[j]["id"];
        gallery.append('<a href="image.html?id=' + imd + '" data-lightbox="my-gallery"><img src="' + imageUrl + '" alt="Image ' + (index + 1) + '" id="' + imd + '"></a>');
        j++;
      });

      // 初始化Justified-Gallery
      gallery.justifiedGallery({
        rowHeight: 250,
        margins: 5,
        maxRowHeight: 200,
        maxRowHeightPremium: 200,
        lastRow: 'justify',
        captions: false,
        randomize: false
      });
    });
  </script>
  <script src="js/main.js"></script>
  <script src="js/responsiveslides.min.js"></script>
  <script>
    $(function () {
      $("#slider4").responsiveSlides({
        auto: true,
        pager: true,
        nav: false,
        speed: 1000,
        namespace: "callbacks",
        before: function () {
          $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
          $('.events').append("<li>after event fired.</li>");
        }
      });
    });
  </script>


</body>

</html>